<template>
  <div class="loading-container">
    <van-loading :size="size" :color="color" :type="type">
      {{ text }}
    </van-loading>
  </div>
</template>

<script setup lang="ts">
interface Props {
  size?: string | number
  color?: string
  type?: 'circular' | 'spinner'
  text?: string
}

withDefaults(defineProps<Props>(), {
  size: '24px',
  color: '#1989fa',
  type: 'circular',
  text: '加载中...'
})
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  min-height: 200px;
}
</style>